<template>
	<view class="category-pages" :class="themeName" :style="[pageStyle]">
		<view v-for="(item, index) in pagesData" :key="index" :class="[item.name]">
			<template v-if="item.name == 'search'">
				<w-search v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<template v-if="item.name == 'category'">
				<w-category class="category" v-show="item.show" :content="item.content" :styles="item.styles" :height="height" />
			</template>
		</view>
		<view class="carts" @click="goCars">购物车</view>
		<view class="tabbar">
			<tabbar />
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { apiGetPage } from '@/api/store';
import { apiGoodsCategory, apiGoodsLists } from '@/api/goods';
import { getRect } from '@/utils/tools';
import { mapGetters, mapState } from 'vuex';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			styles: {},
			pagesData: [],
			height: 0,
			goodsList: [],
			title: ''
		};
	},
	onLoad() {
		apiGetPage({
			type: 2
		}).then((res) => {
			const {
				common: { title },
				common,
				content
			} = res;
			uni.setNavigationBarTitle({
				title
			});
			this.styles = common;
			console.log(content.data);
			this.pagesData = content;
			this.$nextTick(() => {
				this.getHeight();
			});
		});
	},
	onShareAppMessage() {
		const { code } = this.userInfo;

		const share = {
			path: `/pages/category/category?invite_code=${code}`
		};
		return share;
	},
	computed: {
		...mapGetters(['userInfo']),

		pageStyle() {
			const { background_color, background_image, background_type } = this.styles;
			if (background_type == 0 || !background_image || !background_color) {
				return;
			}
			const style =
				background_type == 1
					? {
							'background-color': background_color
					  }
					: {
							'background-image': `url(${background_image})`
					  };
			return style;
		}
	},
	methods: {
		async getHeight() {
			const category = await getRect('.category');
			this.height = category.height;
		},
		goCars(){
			uni.navigateTo({
				url:'/others/pages/shop_cart/shop_cart'
			})
		}
		// upCallback(page) {
		// 	const pageNum = page.num;
		// 	const pageSize = page.size;

		// 	apiGoodsLists({
		// 		page_no: pageNum,
		// 		page_size: pageSize
		// 	})
		// 		.then(({ lists, page_size, count }) => {
		// 			// 如果是第一页需手动置空列表
		// 			if (page.num == 1) this.goodsList = [];
		// 			// 重置列表数据
		// 			this.goodsList = [...this.goodsList, ...lists];
		// 			this.mescroll.endBySize(page_size, count);
		// 		})
		// 		.catch(() => {
		// 			this.mescroll.endErr();
		// 		});
		// }
	} // 使用mixin (在main.js注册全局组件)
};
</script>

<style lang="scss">
/*根元素需要有固定的高度*/
page {
	height: 100%;
	box-sizing: border-box;
	// 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
	/* #ifdef MP-ALIPAY || MP-DINGTALK*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* #endif */
	/*需给父元素设置height:100%*/
	.category-pages {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
		z-index: 1;
		/* 中间 */
		.category {
			flex: 1;
			min-width: 0;
			min-height: 0;
			/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			flex-direction: column;
		}
		.carts{
			position: absolute;
			bottom: 180rpx;
			right: 30rpx;
			z-index: 2;
			background: #FA3534;
			color: #fff;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 90rpx;
		}
	}
}
</style>
